﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>API Document</title>
    <link href="css/index.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="./css/document-ui.css">
    <link href="./css/backend.min.css" rel="stylesheet" />
    <script src="./js/jquery.min.js"></script>
    <script src="./js/layer.min.js"></script>
    <script src="./js/document-ui.js"></script>
    <!--export-->
    <script src="./wordexport/FileSaver.js"></script>
    <script src="./wordexport/jquery.wordexport.js"></script>
    <style type="text/css">

        html {
            box-sizing: border-box;
            overflow: -moz-scrollbars-vertical;
            overflow-y: scroll;
        }

        *,
        *:before,
        *:after {
            box-sizing: inherit;
        }

        body {
            margin: 0;
            min-width: 1000px;
            background: #fafafa;
        }
        .document-ui i, .document-ui em {
            font-style: normal;
        }
        .document-ui .btn.btn-normal {
            display: inline;
            height: 33px;
            color: #49cc90;
            border-color: #49cc90;
            background-color: transparent;
        }

        .document-ui table .model-example {
            margin: 0 !important;
        }

        .document-ui .no-margin.request-section {
            display: none;
        }

        .document-ui input[type=text].error, .document-ui textarea.error {
            outline-color: #cc0000;
            border-color: #cc0000;
            background-color: #f2dede;
        }
        /*   <!-- 横向/分栏、、、*/
        @page WordSection {
            size: 841.9pt 595.3pt;
            mso-page-orientation: landscape;
            margin: 90.0pt 52.0pt 90.0pt 52.0pt;
            mso-columns: 2 even 21.25pt;
            mso-header: url("js/header.htm") h1;
        }

        div.WordSection {
            page: WordSection;
        }
        .document-ui .topbar {
            position: fixed;
            width: 100%;
            top: 0;
            left:0;
            z-index: 1001
        }
        .document-ui > .document-body {
            padding-top: 70px;
        }
        .gatewaylist {
            width: 240px;min-height:35px;
            position: absolute;z-index:1001;
            top: 46px;
            list-style: none;
            background: #FFF;
            border: 1px solid #62a03f;
            display: none;
            padding: 5px 0;margin:0; 
            overflow:hidden;overflow-y:auto;max-height:300px;
        }
        .gatewaylist li{margin:0px;padding:6px;font-size: 14px;}
        .gatewaylist li a{font-weight:500!important;color:#333!important;font-size:1.1em!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
        .gatewaylist li:nth-of-type(even){background:rgba(206, 231, 255, 0.3)}
        .gatewaylist li.active,.gatewaylist li:hover{ background:#CEE7FF;}
    </style>
</head>
<body>
    <div id="document-api" class="document-api">
        <div class="document-ui swagger-container">
            <div class="topbar">
                <div class="wrapper">
                    <div class="topbar-wrapper">
                        <a rel="noopener noreferrer" class="link">
                            <img height="40" src="image/API.png" /><span>API Document</span>
                        </a>
                        <form class="download-url-wrapper">
                            <label class="select-label" for="Url" style="justify-content:flex-end;align-content:flex-end;align-items:flex-end;">
                                <input type="text" autocomplete="off" id="Url" class="mr-2 w-10-m customeUrl" style="width:240px;" placeholder="http://127.0.0.1:1221/" /> <input type="text" autocomplete="off" id="query_keyword" style="width:240px;" placeholder="方法名称" />
                                <button class="btn btn-normal ml-2" id="btnSearch">查询</button><button class="btn btn-normal ml-2" id="exportBtn">导出至word</button>
                                <button class="btn btn-normal ml-2" id="LoginBtn">登录</button>
                            </label>
                            <ul class="gatewaylist">
                                 <li class="item-gateway"><a href="#">http://127.0.0.1:1221/</a></li> 
                            </ul>
                        </form>
                    </div>
                </div>
            </div>
            <div class="document-ui document-body">
                <div>
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg-assets"><defs><symbol viewBox="0 0 20 20" id="unlocked"><path d="M15.8 8H14V5.6C14 2.703 12.665 1 10 1 7.334 1 6 2.703 6 5.6V6h2v-.801C8 3.754 8.797 3 10 3c1.203 0 2 .754 2 2.199V8H4c-.553 0-1 .646-1 1.199V17c0 .549.428 1.139.951 1.307l1.197.387C5.672 18.861 6.55 19 7.1 19h5.8c.549 0 1.428-.139 1.951-.307l1.196-.387c.524-.167.953-.757.953-1.306V9.199C17 8.646 16.352 8 15.8 8z"></path></symbol><symbol viewBox="0 0 20 20" id="locked"><path d="M15.8 8H14V5.6C14 2.703 12.665 1 10 1 7.334 1 6 2.703 6 5.6V8H4c-.553 0-1 .646-1 1.199V17c0 .549.428 1.139.951 1.307l1.197.387C5.672 18.861 6.55 19 7.1 19h5.8c.549 0 1.428-.139 1.951-.307l1.196-.387c.524-.167.953-.757.953-1.306V9.199C17 8.646 16.352 8 15.8 8zM12 8H8V5.199C8 3.754 8.797 3 10 3c1.203 0 2 .754 2 2.199V8z"></path></symbol><symbol viewBox="0 0 20 20" id="close"><path d="M14.348 14.849c-.469.469-1.229.469-1.697 0L10 11.819l-2.651 3.029c-.469.469-1.229.469-1.697 0-.469-.469-.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-.469-.469-.469-1.228 0-1.697.469-.469 1.228-.469 1.697 0L10 8.183l2.651-3.031c.469-.469 1.228-.469 1.697 0 .469.469.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c.469.469.469 1.229 0 1.698z"></path></symbol><symbol viewBox="0 0 20 20" id="large-arrow"><path d="M13.25 10L6.109 2.58c-.268-.27-.268-.707 0-.979.268-.27.701-.27.969 0l7.83 7.908c.268.271.268.709 0 .979l-7.83 7.908c-.268.271-.701.27-.969 0-.268-.269-.268-.707 0-.979L13.25 10z"></path></symbol><symbol viewBox="0 0 20 20" id="large-arrow-down"><path d="M17.418 6.109c.272-.268.709-.268.979 0s.271.701 0 .969l-7.908 7.83c-.27.268-.707.268-.979 0l-7.908-7.83c-.27-.268-.27-.701 0-.969.271-.268.709-.268.979 0L10 13.25l7.418-7.141z"></path></symbol><symbol viewBox="0 0 24 24" id="jump-to"><path d="M19 7v4H5.83l3.58-3.59L8 6l-6 6 6 6 1.41-1.41L5.83 13H21V7z"></path></symbol><symbol viewBox="0 0 24 24" id="expand"><path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"></path></symbol></defs></svg>
                </div>
                <div class="wrapper" id="apiList">

                </div>
            </div>
        </div>
    </div>
    <script type="text/template" id="templlogin">
        <style type="">
            .login-content .form-control.focus {
                border-width: 2px;
                border-color: #8f93f6;
            }
            .login-content .form-control.error {
                border-width: 2px;
                border-color: #cc0000;
                background-color: #f2dede;
            }
            .floating-input.focus ~ label {
                color: #8f93f6;
                top: 0;
                font-size: 10px;
                left: 6px;
                background: #fafbfe;
                padding: 5px 8px;
            }
        </style>
        <section class="login-content" style="height:100%;">
            <div class="sign-user_card" style="border:0;">
                <h3 class="mb-3">用户授权</h3>
                <p id="errorTip">Login to stay connected.</p>
                <form class="form-submit p-3">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="floating-label form-group">
                                <input class="floating-input form-control focus" type="text" id="IdentityUrl" value="http://127.0.0.1:1221/" placeholder=" " />
                                <label>授权中心</label>
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="floating-label form-group">
                                <input class="floating-input form-control focus" type="text" id="Project" value="Signal" placeholder=" " />
                                <label>项目名称</label>
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="floating-label form-group">
                                <input class="floating-input form-control" type="text" id="username" placeholder=" " />
                                <label>用户名</label>
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="floating-label form-group">
                                <input class="floating-input form-control" type="password" id="password" placeholder=" " />
                                <label>用户密码</label>
                            </div>
                        </div>
                    </div>
                    <button type="button" class="btn btn-primary mt-4" id="loginSubmit" style="position:relative;width:100%">立即登录</button>
                </form>
            </div>
        </section>
    </script>
    <!--导出模板-->
    <script type="text/template" id="templexport">
        <div class="WordSection table-responsive" id="ReportToWord">
            <table class="table data-table table-striped table-bordered" style="border:1px solid #999;border-collapse:collapse;">
                <thead>
                    <tr><th width="10%" style="border:1px solid #999;">模块名称</th><th width="10%" style="border:1px solid #999;">方法</th><th width="10%" style="border:1px solid #999;">请求方式</th><th width="20%" style="border:1px solid #999;">说明</th><th width="20%" style="border:1px solid #999;">参数</th></tr>
                </thead>
                <tbody>
                    [content]
                </tbody>
            </table>
        </div>
    </script>
    <script src="js/login.token.js"></script>
    <script type="text/javascript">
        $(function () {
            //导出word，生成模板内容
            $("#exportBtn").click(function (e) {
                e.preventDefault();
                var routelist = $(".document-ui .opblock-tag-section");
                var table_tbody = "";
                $.each(routelist, function (i, model) {
                    var subFunctin = $(model).find(".resource");//方法列表
                    var roueName = $(model).find(".opblock-tag").attr("data-tag");
                    $.each(subFunctin, function (ii, fun) {
                        var m = $(fun).find(".opblock-summary-method").text(), t = $(fun).find(".parameters-container table.paramsTable"),
                            obj = {
                                rowspan: subFunctin.length, roueName: roueName, MethodName: $(fun).find(".opblock-summary-path").attr("data-path"), Method: m, Options: $(fun).find(".opblock-summary-description").text(), "Parameters": (m.toUpperCase() == "NONE" || m.toUpperCase() == "POST") ? ($(fun).find(".example").length ? $(fun).find(".example").text() : function () { var str = []; $.each(t.find("tbody > tr.response"), function (tt, tr) { str.push($(tr).find("td:eq(0)").text() + ":" + $(tr).find("td:eq(2)").text()) }); return str.join(",</br>"); })
                                    : function () { var str = []; $.each(t.find("tbody > tr.response"), function (tt, tr) { str.push($(tr).find("td:eq(0)").text() + ":" + $(tr).find("td:eq(2)").text()) }); return str.join(",</br>"); }
                            }
                        ii == 0 ? table_tbody += strFormat("<tr><td rowspan='{rowspan}' style=\"border:1px solid #999;\">{roueName}</td><td style=\"border:1px solid #999;\">{MethodName}</td><td style=\"border:1px solid #999;\">{Method}</td><td style=\"border:1px solid #999;\">{Options}</td><td style=\"border:1px solid #999;\">{Parameters}</td></tr>", obj) : table_tbody += strFormat("<tr><td style=\"border:1px solid #999;\">{MethodName}</td><td style=\"border:1px solid #999;\">{Method}</td><td style=\"border:1px solid #999;\">{Options}</td><td style=\"border:1px solid #999;\">{Parameters}</td></tr>", obj);
                    });
                })
                var templ = $("#templexport").html();
                templ = templ.replace("[content]", table_tbody);
                var _height = document.documentElement.clientHeight || $(window).height();
                var _width = document.documentElement.clientWidth || $(window).width();
                _width = _width < 800 ? _width : _width * 0.6;
                var layerindex = layer.open({
                    type: 1,
                    title: "api 接口文档",
                    area: [_width + 'px', (_height - 100) + 'px'],
                    content: templ,
                    btn: ['立即导出', '关闭'],
                    yes: function (index) {
                        var cssTxt = ".table{width:100%;margin-bottom:1rem;color:#535f6b;border: 1px solid #333;border-collapse: collapse;}.table td,.table th{padding:.75rem;vertical-align:top;border-top:1px solid #333}.table thead th{vertical-align:bottom;border-bottom:2px solid #f1f1f1;background: rgb(218,227,243);}.table tbody+tbody{border-top:2px solid #f1f1f1}.table-sm td,.table-sm th{padding:.3rem}.table-bordered td,.table-bordered th{border:1px solid #f1f1f1}.table-bordered thead td,.table-bordered thead th{border-bottom-width:2px}.table-borderless tbody+tbody,.table-borderless td,.table-borderless th,.table-borderless thead th{border:0}.table-striped tbody tr:nth-of-type(odd){background-color:rgba(0,0,0,.05)}.table-hover tbody tr:hover{color:#535f6b;background-color:rgba(0,0,0,.075)}table.dataTable{width:100%;margin:0 auto;clear:both;border-collapse:separate;border-spacing:0}table.dataTable tfoot th,table.dataTable thead th{font-weight:700}table.dataTable thead td,table.dataTable thead th{padding:10px 18px;border-bottom:1px solid #111}table.dataTable thead td:active,table.dataTable thead th:active{outline:none}table.dataTable tfoot td,table.dataTable tfoot th{padding:10px 18px 6px;border-top:1px solid #111}table.dataTable tbody tr{background-color:#fff}table.dataTable tbody tr.selected{background-color:#b0bed9}table.dataTable tbody td,table.dataTable tbody th{padding:8px 10px}table.dataTable.display tbody td,table.dataTable.display tbody th,table.dataTable.row-border tbody td,table.dataTable.row-border tbody th{border-top:1px solid #ddd}table.dataTable.display tbody tr:first-child td,table.dataTable.display tbody tr:first-child th,table.dataTable.row-border tbody tr:first-child td,table.dataTable.row-border tbody tr:first-child th{border-top:none}table.dataTable.cell-border tbody td,table.dataTable.cell-border tbody th{border-top:1px solid #ddd;border-right:1px solid #ddd}table.dataTable.cell-border tbody tr td:first-child,table.dataTable.cell-border tbody tr th:first-child{border-left:1px solid #ddd}table.dataTable.cell-border tbody tr:first-child td,table.dataTable.cell-border tbody tr:first-child th{border-top:none}table.dataTable.display tbody tr.odd,table.dataTable.stripe tbody tr.odd{background-color:#f9f9f9}table.dataTable.display tbody tr.odd.selected,table.dataTable.stripe tbody tr.odd.selected{background-color:#acbad4}table.dataTable.display tbody tr:hover,table.dataTable.hover tbody tr:hover{background-color:#f6f6f6}table.dataTable.display tbody tr:hover.selected,table.dataTable.hover tbody tr:hover.selected{background-color:#aab7d1}table.dataTable td.dt-left,table.dataTable th.dt-left{text-align:left}table.dataTable td.dataTables_empty,table.dataTable td.dt-center,table.dataTable th.dt-center{text-align:center}table.dataTable td.dt-right,table.dataTable th.dt-right{text-align:right}table.dataTable td.dt-justify,table.dataTable th.dt-justify{text-align:justify}table.dataTable td.dt-nowrap,table.dataTable th.dt-nowrap{white-space:nowrap}table.dataTable tfoot td.dt-head-left,table.dataTable tfoot th.dt-head-left,table.dataTable thead td.dt-head-left,table.dataTable thead th.dt-head-left{text-align:left}table.dataTable tfoot td.dt-head-center,table.dataTable tfoot th.dt-head-center,table.dataTable thead td.dt-head-center,table.dataTable thead th.dt-head-center{text-align:center}table.dataTable tfoot td.dt-head-right,table.dataTable tfoot th.dt-head-right,table.dataTable thead td.dt-head-right,table.dataTable thead th.dt-head-right{text-align:right}table.dataTable tfoot td.dt-head-justify,table.dataTable tfoot th.dt-head-justify,table.dataTable thead td.dt-head-justify,table.dataTable thead th.dt-head-justify{text-align:justify}table.dataTable tfoot td.dt-head-nowrap,table.dataTable tfoot th.dt-head-nowrap,table.dataTable thead td.dt-head-nowrap,table.dataTable thead th.dt-head-nowrap{white-space:nowrap}table.dataTable tbody td.dt-body-left,table.dataTable tbody th.dt-body-left{text-align:left}table.dataTable tbody td.dt-body-center,table.dataTable tbody th.dt-body-center{text-align:center}table.dataTable tbody td.dt-body-right,table.dataTable tbody th.dt-body-right{text-align:right}table.dataTable tbody td.dt-body-justify,table.dataTable tbody th.dt-body-justify{text-align:justify}table.dataTable tbody td.dt-body-nowrap,table.dataTable tbody th.dt-body-nowrap{white-space:nowrap}table.dataTable,table.dataTable td,table.dataTable th{box-sizing:content-box}.dataTables_wrapper{position:relative;clear:both;*zoom:1;zoom:1}";
                        //按钮【按钮一】的回调
                        $('#ReportToWord').wordExport("api 接口文档", cssTxt);
                        return;
                    },
                    btn2: function (index, layero) {
                        //按钮【按钮二】的回调
                        layer.close(layerindex);//关闭弹框
                    },
                })
            })
            strFormat = function (str, obj) {
                if (typeof obj == "object") {
                    for (var attr in obj) {
                        str = str.replace("{" + attr + "}", obj[attr]);
                    }
                } else {
                    //var a = arguments;
                    //alert(a instanceof Array)==》false
                    //把参数放到数组里面 slice() 方法可从已有的数组中返回选定的元素。
                    var arr = [].slice.call(arguments, 1);
                    //调用自己
                    return strFormat(str, arr);
                }
                return str;
            }
        })
    </script>
</body>
</html>